<template>
  <el-dialog
    class="add-area-modal"
    append-to-body
    :title="title"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(800)"
    :before-close="handleCancel">
    <div class="form-container">
      <el-form
        :model="ruleForm"
        :rules="rules"
        size="medium"
        ref="ruleForm"
        class="rule-form"
        :label-width="$setRem(130)"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="节点名称" prop="majorName" required>
              <el-input placeholder="请输入节点名称" v-model="ruleForm.majorName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="tree-form" label="父及节点" prop="parentId">
              <el-input
                placeholder="请选择父及节点"
                v-model="ruleForm.parentName"
                @focus="handleFocus"
                @input="handleInput"
                @blur="handleBlur">
              </el-input>
              <el-tree
                v-show="hasShow"
                class="menu-filter-tree"
                ref="tree"
                highlight-current
                :current-node-key="ruleForm.parentId"
                :data="menus"
                :props="defaultProps"
                node-key="id"
                default-expand-all
                @node-click="handleClick"
                :filter-node-method="filterNode">
              </el-tree>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                placeholder="请输入"
                :rows="3"
                v-model="ruleForm.remark">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span class="dialog-footer" slot="footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="hanldeSave">
        保 存
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // 弹框是否展示
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => ({})
    },
    menus: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'majorName'
      },
      hasShow: false,
      activeData: {},
      ruleForm: {
        id: '',
        majorName: '',
        parentName: '',
        parentId: '',
        remark: ''
      },
      rules: {
        majorName: [
          { required: true, message: '请输入节点名称' }
        ],
      },
    };
  },
  computed: {
    title() {
      return `${this.type === 'add' ? '新增' : '编辑'}节点`;
    }
  },
  watch: {
    // 监听回填数据
    options: {
      deep: true,
      handler: function (data) {
        if (this.$checkType(data) === 'object') {
          const { parentId } = data;
          const keys = Object.keys(this.ruleForm);
          keys.forEach(key => {
            if (key === 'parentName' && parentId && parentId !== '0') {
              this.$nextTick(() => {
                const { data } = this.$refs.tree.getNode(parentId) || {};
                if (data) {
                  this.ruleForm[key] = data.majorName;
                  this.activeData = data || {};
                  this.$refs.tree.setCurrentKey(parentId , true);
                }
              });
              return;
            }
            this.ruleForm[key] = data[key] || '';
          });
        }
      }
    },
    // 监听弹框显示/隐藏
    visible(data) {
      if (!data) {
        Object.keys(this.ruleForm).forEach(key => {
          this.ruleForm[key] = '';
        });
        this.hasShow = false;
        this.activeData = {};
      }
    }
  },
  methods: {
    // 点击菜单节点
    handleClick(data, node, ref) {
      const { id, majorName } = data;
      this.ruleForm.parentId = id;
      this.activeData = data;
      this.ruleForm.parentName = majorName;
      this.hasShow = false;
    },
    handleInput(val) {
      this.$refs.tree && this.$refs.tree.filter(val);
    },
    handleFocus() {
      this.hasShow = true;
    },
    handleBlur(e) {
      const className = e.relatedTarget && e.relatedTarget.className;
      this.hasShow = className && /el-tree/g.test(className);
      if (this.ruleForm.parentName !== this.activeData.majorName) {
        this.ruleForm.parentName = this.activeData.majorName || '';
      }
    },
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true;
      return data.majorName.indexOf(value) !== -1;
    },
    // 取消
    handleCancel() {
      this.$emit('cancel');
    },
    hanldeSave() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('submit', this.ruleForm);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
  @import "../../../assets/styles/dialog";
  .add-area-modal {
    .form-container {
      width: 100%;
      padding: 20px 20px 20px 0;
      .tree-form {
        /deep/ .el-form-item__content {
          position: relative;
          .menu-filter-tree {
            position: absolute;
            top: 38px;
            left: 1px;
            width: 100%;
            max-height: 300px;
            z-index: 2;
            background-color: #fff;
            border: 1px solid #f1f1f1;
            border-top-color: transparent;
            box-shadow: 0 2px 8px 0 #bbb;
            border-radius: 4px;
            overflow: auto;
          }
        }
      }
    }
  }
</style>
